<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="80px" :rules="rules" slot="form" ref="formInline">
                <!-- edit by cuihd at 2018/8/8 -->
                <!-- 将原“查询条件”的所属省、市区、区县删掉，这些查询条件区分度小，可能会查出几十万的数据 -->
                <!-- 直接使用区分度高的学校名称来查询，学校名称为必填项 -->          
                <!-- <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省" prop="fProvinceId">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName">
                            <school v-model="formInline.schoolName" :provinceId="formInline.fProvinceId" :cityId="formInline.fCityId" :areaId="formInline.fAreaId" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="姓名">
                            <!-- <el-popover placement="top-start" trigger="focus" content="字符长度不大于12个">
                                <el-input v-model="formInline.parentName" placeholder="请输入家长姓名" :maxlength="10" slot="reference"></el-input>
                            </el-popover> -->
                             <el-input v-model="formInline.parentName" placeholder="请输入家长姓名" :maxlength="12" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号" prop='loginNum'>
                            <!-- <el-popover placement="top-start" trigger="focus" content="字符长度不大于11个">
                                <el-input v-model="formInline.loginNum" placeholder="请输入完整的手机号" :maxlength="11" slot="reference"></el-input>
                            </el-popover> -->
                            <el-input v-model="formInline.loginNum" placeholder="请输入完整的手机号" :maxlength="11" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="e学云ID号" prop='EId'>
                            <!-- <el-popover placement="top-start" trigger="focus" content="字符长度不大于9个">
                                <el-input v-model="formInline.EId" placeholder="请输入完整的e学云ID" :maxlength="9" slot="reference"></el-input>
                            </el-popover> -->
                            <el-input v-model="formInline.EId" placeholder="请输入完整的e学云ID号" :maxlength="10" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                
                <el-table-column prop="exueId" align="center" label="e学云ID号"></el-table-column>
                
                <el-table-column align="center" label="家长姓名" min-width="110">
                    <template scope="scope">
                        <span>{{ scope.row.paraentName || '--'}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column prop="phone" align="center" label="手机号" min-width="140"></el-table-column>

                <el-table-column label="创建时间" min-width="170" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.createTime | filterCreateTime }}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="最后登陆时间" min-width="170" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.lastLoginTime | filterLastTime }}</span>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="其他操作" width="250">
                    <template scope="scope">    
                        <el-button type="text" class="btn-success" @click="initializtion(scope.row.userId,scope.row.paraentName)">初始化密码</el-button>                    
                        <el-button type="text" class="btn-success" @click="checked(scope.row.userId,scope.row.parentId,scope.row.studentNum)">查看</el-button>
                        <el-button type="text" class="btn-success" @click="deleteRow(scope.row.userId,scope.row.parentId,scope.row.studentNum)">删除</el-button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import {query, deleteParents, initPwd} from 'api/parentManagement';
import { mapState, mapActions, mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
import validate from '@/utils/validate';
export default{
    components: {TableLayout, province, city, region, school},
    data() {
        return {
            formInline: {// form表单数据
                leaderName: '',
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                province: [],
                findCity: [],
                findArea: [],
                loginNum: '',
                schoolAddress: '',
                schoolName: '',
                schoolId: '',
                schoolNameList: [],
                EId: '',
                parentName: ''
            },
            dataApply: [],
            subjectDetail: false,
            subject: '',
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                loginNum: [...validate.phone()],
                // fProvinceId: [{required: true, message: '请选择省份' }], // edit by cuihd at 2018/8/8
                schoolName: [{required: true, message: '请先输入学校'}], // edit by cuihd at 2018/8/8
                EId: [...validate.exueCode()]
            },
            loading: false
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        // this.searchFetchData();
    },
    filters: {
        filterCreateTime(val) {
            if (val) {
                return val.substr(0, val.length-2) 
            }
        },
        filterLastTime(val) {
            if (val) {
                return val.substr(0, val.length-2) 
            } else {
                return '--'
            }
        }
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
  
        // 单个删除
        deleteRow(rows, row2, row3) {
            let roleIds = rows;
            this.$confirm('确定要删除该家长?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deleteParents(roleIds, row2, row3).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                });  
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 分页
        handleSizeChange(val) {
            this.ChangePageSize(val);
            this.$refs.formInline.validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                }
            })
        },
        handleCurrentChange(val) {    
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            query(this.listQuery.page, this.config.pageSize, this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId,
            this.formInline.schoolId, this.formInline.parentName, this.formInline.EId, this.formInline.loginNum).then(response => {              
                if (response.data.status==200) {
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                    this.loading = false;    
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            });
        },

        // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val
        },

        // 表单查询
   
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },
        // // 初始化密码
        // initializtion(row, name) {
        //     this.$confirm('确定要初始化家长【'+name+'】的密码?', ' ', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消'
        //     }).then(() => {
        //         initPwd('111111', row).then(response => {
        //             this.$message({
        //                 type: 'success',
        //                 message: '初始化密码成功，新密码是111111'
        //             })
        //         });  
        //         this.searchFetchData();
        //     })
        // },
        // 初始化密码
        initializtion(row, name) {
            this.$confirm('确定要初始化家长【'+name+'】的密码?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                initPwd('111111', row).then(response => {
                    this.$message({
                        type: 'success',
                        message: '初始化密码成功，新密码是111111'
                    })
                });  
                this.searchFetchData();
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 跳转
        checked(uId, pId, num) {
            this.$router.push({path: `checkParentManage/${uId}/${pId};${num}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
        margin-left:5px;
        background:#f9f9f9;
        color:#444;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .footer{
            text-align:center;
            margin-top:40px;
        }
    .footer .el-button{
            padding:10px 40px;
        }
}
</style> 